<template>
  <div class="flex" style="justify-content: space-between;padding: 20px 0;">
    <el-radio-group size="large">
      <el-radio-button label="New York">销量</el-radio-button>
      <el-radio-button label="Washington">销售额</el-radio-button>
    </el-radio-group>

    <el-select class="m-2" placeholder="Select" size="large">
      <el-option label="昨天" />
      <el-option label="今天" />
      <el-option label="前三天" />
      <el-option label="前七天" />
      <el-option label="前一个月" />
    </el-select>
  </div>
  <div ref="pie" style="width: 100%;height: 600px;">

  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { ref, onMounted, watch } from 'vue'
type EChartsOption = echarts.EChartsOption;
var option: EChartsOption;
const props = defineProps<{ data: SalePie[] }>()
var myChart: echarts.ECharts;

const pie = ref<HTMLDivElement>();
onMounted(() => {
  myChart = echarts.init(pie.value as HTMLDivElement);

  option = {
    // title: {
    //   text: 'Referer of a Website',
    //   subtext: 'Fake Data',
    //   left: 'center'
    // },
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0,0,0,.5)',
      textStyle: {
        color: '#fff'
      },
      formatter: '{b}:{c}({d}%)'
    },
    legend: {
      orient: 'vertical',
      height: 100,
      // left: 'left'
      right: '10%'
    },
    series: [
      {
        // name: 'Access From',
        type: 'pie',
        radius: ['30%', '50%'],
        // data: [
        //   { value: 1048, name: 'Search Engine' },
        //   { value: 735, name: 'Direct' },
        //   { value: 580, name: 'Email' },
        //   { value: 484, name: 'Union Ads' },
        //   { value: 300, name: 'Video Ads' }
        // ],
        data: [],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        right: '30%'
      }
    ]
  };

  // 把 子传父的数据 赋值给 option 里面的data，渲染饼图
  // option.series[0].data = props.data;

  // option && myChart.setOption(option);
})

watch(() => props.data, (newVal) => {
  if (newVal.length !== 0) {
    // 把数据修改掉
    (option.series as echarts.SeriesOption[])[0].data = newVal.map(item => ({
      name: item.name,
      value: item.yesterday_money
    }))
    // 但凡显示的数据更新，都要重新渲染
    option && myChart.setOption(option);
  }
})


</script>

<style scoped></style>